<template>
    <view class="page">
        <view class="data_box">
            <view class="top_box">
                <view class="left_box">选择日期:</view>
                <view class="right_box" @click="show = true" v-show="isdate == false"><u-icon label="全部" labelColor="#fff" labelPos="left"
                        name="arrow-down-fill" color="#fff" size="28"></u-icon></view>
                <view class="right_box" @click="show = true" v-show="isdate == true">{{ date.startDate }}到{{ date.endDate }}
                </view>
            </view>
            <view class="bot_box">
                <view class="left_box">用户充值合计：</view>
                <view class="right_box">￥ {{ zongNum }}</view>
            </view>
        </view>
        <view class="liebiao_box" v-for="(item, index) in list" :key="index">
            <view class="left_box">
                <view class="touxiang_box">
                    <image :src="item.avatar" mode="scaleToFill" />
                </view>
                <view class="txt_box">
                    <view class="top_txt">{{ item.name }}</view>
                    <view class="bot_txt">ID:{{ item.user_id }}</view>
                </view>
            </view>
            <view class="right_box">
                <view class="top_txt">充值金额：<text>￥{{ item.pay_price }}</text></view>
                <view class="bot_txt">{{ item.create_time | formatDate('-') }}</view>
            </view>
        </view>
        <u-calendar v-model="show" :mode="mode" @change="change">
            <view slot="tooltip">
                <view class="title" @click="quanbu">
                    全部
                </view>
            </view>
        </u-calendar>
        <Empty v-if="list.length == 0"></Empty>
        <ViewTop ref="VT" :scrollTop="top"></ViewTop>
    </view>
</template>
<script>
import Empty from '@/components/empty/empty.vue'
import ViewTop from '@/components/viewTop/viewTop.vue'
export default {
    components: {
        Empty,
        ViewTop
    },
    data() {
        return {
            list: [],//充值列表
            show: false,
            mode: 'range',
            isdate: false,
            date: {},
            zongNum: '',//总充值
            page: 1,//页数
            flag: true, // 防抖开关 防止用户不停的下拉
            top: 0,//距离顶部距离
        }
    },
    onPageScroll(e) {
        //调用子组件方法
        this.$refs.VT.topData(e.scrollTop);
    },
    onShow() {
        this.getList()
    },

    onReachBottom() {
        if (this.flag) {
            this.getList();
        } else {
            uni.showToast({
                title: "已经到底了",
                icon: 'none'
            })
        }
    },
    filters: {
        // 时间戳处理
        formatDate: function (value, spe = '/') {
            value = value * 1000
            let data = new Date(value);
            let year = data.getFullYear();
            let month = data.getMonth() + 1;
            let day = data.getDate();
            let h = data.getHours();
            let mm = data.getMinutes();
            let s = data.getSeconds();
            month = month >= 10 ? month : "0" + month;
            day = day >= 10 ? day : "0" + day;
            h = h >= 10 ? h : "0" + h;
            mm = mm >= 10 ? mm : "0" + mm;
            return `${year}${spe}${month}${spe}${day} ${h}:${mm}`;
        }
    },
    methods: {
        quanbu() {
            this.show = false
            this.date = {},
                this.isdate = false
            this.page = 1
            this.list = []
            this.getList()
        },
        change(e) {
            ////console.log(e)
            this.date = e
            this.isdate = true
            this.page = 1
            this.list = []
            this.getList()

        },
        getList() {
            if (this.isdate == false) {
                let data = {
                    page: this.page
                }
                uni.showLoading({
                    title: '加载中...',
                    icon: 'none'
                })
                this.$Request.get(this.$api.user.teamRechargeList, data).then(res => {
                    this.zongNum = res.data.recharge
                    uni.hideLoading()
                    var list = res.data.list;
                    this.page++;
                    this.list = this.list.concat(list);// 拼接回来的数据
                    // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
                    if (list.length < 10) {
                        this.flag = false
                    } else {
                        this.flag = true
                    }
                })
            } else {
                let data = {
                    page: this.page,
                    start_time: this.date.startDate,
                    end_time: this.date.endDate
                }
                uni.showLoading({
                    title: '加载中...',
                    icon: 'none'
                })
                this.$Request.get(this.$api.user.teamRechargeList, data).then(res => {
                    this.zongNum = res.data.recharge
                    uni.hideLoading()
                    var list = res.data.list;
                    this.page++;
                    this.list = this.list.concat(list);// 拼接回来的数据
                    // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
                    if (list.length < 10) {
                        this.flag = false
                    } else {
                        this.flag = true
                    }
                })
            }

        },
    }
}
</script>
<style lang="scss" scopeed>
.page {
    width: 100%;
    min-height: 100vh;
    background-color: #262626;
    padding-top: 24rpx;

    .title {
        padding: 35rpx 0 0 35rpx;
        font-size: 30rpx;
        color: #FED187;
    }

    .data_box {
        width: 690rpx;
        height: 192rpx;
        opacity: 1;
        margin: auto;
        margin-bottom: 32rpx;
        background: rgba(255, 231, 192, 0.1);
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        opacity: 1;
        border: 1rpx solid #FED187;

        .top_box {
            width: 626rpx;
            height: 96rpx;
            border-bottom: 1rpx solid #D8D8D8;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left_box {
                font-size: 28rpx;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #fff;
            }

            .right_box {
                font-size: 28rpx;
                font-family: Source Han Sans CN-Bold, Source Han Sans CN;
                font-weight: 700;
                color: #fff;
            }
        }

        .bot_box {
            width: 626rpx;
            height: 96rpx;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left_box {
                font-size: 28rpx;
                font-weight: 400;
                color: #fff;
            }

            .right_box {
                font-size: 28rpx;
                font-weight: 700;
                color: #FD9E00;
            }
        }
    }

    .liebiao_box {
        width: 690rpx;
        height: 156rpx;
        // background: #FFFFFF;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        opacity: 1;
        margin: 32rpx auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 231, 192, 0.1);
        opacity: 1;
        border: 1rpx solid #FED187;

        .left_box {
            width: 40%;
            height: 88rpx;
            display: flex;
            justify-content: center;

            .touxiang_box {
                width: 88rpx;
                height: 88rpx;
                border-radius: 50%;
                background-color: #fff;
                margin-right: 10rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .txt_box {
                .top_txt {
                    width: 80rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 44rpx;
                    line-height: 44rpx;
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #fff;
                }

                .bot_txt {
                    height: 44rpx;
                    line-height: 44rpx;
                    font-size: 22rpx;
                    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                    font-weight: 400;
                    color: #fff;
                }
            }

        }

        .right_box {
            width: 50%;
            height: 88rpx;
            text-align: right;
            padding-right: 32rpx;

            .top_txt {
                height: 44rpx;
                line-height: 44rpx;
                font-size: 28rpx;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #fff;

                text {
                    font-size: 28rpx;
                    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
                    font-weight: 700;
                    color: #FD9E00;
                }
            }

            .bot_txt {
                height: 44rpx;
                line-height: 44rpx;
                font-size: 22rpx;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #fff;
            }

        }
    }
}
</style>